@charset "UTF-8";

#sliderBox{
        width: 318px;
        height: 40px;
        line-height: 40px;
        background-color: #e8e8e8;
        position: relative;
        margin:0 auto;
        margin-left: 1px;
        margin-top: 15px;
        margin-bottom: 0px;
}
.bgColor{
    position: absolute;
    left:0;
    top:0;
    width:40px;
    height: 40px;
    background-color: lightblue;
}
.txtBox{
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #000;
    text-align: center;
}
.slider{
    position: absolute;
    left:0;
    top:0;
    width: 50px;
    height: 38px;
    border: 1px solid #ccc;
    background: #fff;
    text-align: center;
    cursor: move;
}
.slider>i{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.slider.active>i{
    color:green;
}

/*.drag{*/
/*    width: 300px;*/
/*    height: 40px;*/
/*    line-height: 40px;*/
/*    background-color: #e8e8e8;*/
/*    position: relative;*/
/*    margin:0 auto;*/
/*    margin-left: 46px;*/
/*    margin-top: 20px;*/
/*    margin-bottom: 0px;*/
/*}*/
/*.bg{*/
/*    width:40px;*/
/*    height: 100%;*/
/*    position: absolute;*/
/*    background-color: #75CDF9;*/
/*}*/
/*.text{*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    text-align: center;*/
/*    user-select: none;*/
/*}*/
/*.btn{*/
/*    width:40px;*/
/*    height: 38px;*/
/*    position: absolute;*/
/*    border:1px solid #ccc;*/
/*    cursor: move;*/
/*    font-family: "宋体";*/
/*    text-align: center;*/
/*    background-color: #fff;*/
/*    user-select: none;*/
/*    color:#666;*/
/*}*/